<template>
    <div class="page">
        <div class="page_left">
            <div class="member_box">
                <el-avatar style="vertical-align: top; display: inline-block" :size="64" :src="memberInfo.avatar">
                    <img src="@/assets/imgs/logo/avatar.png" />
                </el-avatar>
                <div class="base_left">
                    <div class="member_name">
                        <span>
                            {{ memberInfo.nickname || '微信昵称' }}
                        </span>
                        <div class="level">
                            <img class="vipImg" src="@/assets/imgs/mall/user/level.png" />
                            <span class="level_name">{{ memberInfo.level?.memberLevelName || '注册会员' }}</span>
                        </div>
                    </div>
                    <div class="mobile">{{ memberInfo.mobile || '-' }}</div>
                    <div class="desc">加入时间：{{ memberInfo.joinAt || '-' }}</div>
                </div>
            </div>
            <div class="base_number">
                <div class="line"></div>
                <div class="item">
                    <div class="label">成长值</div>
                    <div class="num link" @click="showGrowDialog">{{ memberInfo.growthVal || 0 }}</div>
                </div>
                <div class="item">
                    <div class="label">可用积分</div>
                    <div class="num link" @click="showIntegralDialog">
                        {{ floatDivide(memberInfo.points?.availablePoints, 100) || 0 }}
                    </div>
                </div>
            </div>
            <div class="base_info">
                <el-descriptions class="gray999" :column="1" size="small">
                    <el-descriptions-item label="会员昵称:">
                        {{ memberInfo.nickname || '微信昵称' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号:">{{ memberInfo.mobile || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="性别:">
                        {{ memberInfo.sex === 0 ? '未知' : memberInfo.sex === 1 ? '男' : '女' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="生日:">{{ memberInfo.birthday || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="所在地区:">
                        <!-- 兼容后端返回 -->
                        {{ regionComputed }}
                    </el-descriptions-item>
                    <el-descriptions-item label="会员ID:">{{ memberInfo.memberNo || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="加入时间:">{{ memberInfo.joinAt || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="来源店铺:">{{ memberInfo.joinShopId || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="会员等级:">
                        <div class="level" @click="showLevelDialog">
                            {{ memberInfo.level?.memberLevelName || '-' }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="会员权益:">
                        <div class="priority">
                            <template v-if="memberInfo.memberPriority?.length">
                                <span class="priority_item" v-for="e in memberInfo.memberPriority || []" :key="e">
                                    {{ e }}
                                </span>
                            </template>
                            <span v-else>-</span>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="page_right">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane label="交易订单" name="1">
                    <div class="amount_count">
                        <el-descriptions class="tab_descr" direction="vertical" :column="4">
                            <el-descriptions-item label="累计消费金额（元）">
                                <span>{{ merberData.transactionTotalAmount }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="累计消费订单数">
                                {{ merberData.transactionTotalCount }}
                            </el-descriptions-item>
                            <el-descriptions-item label="平均每笔订单金额（元）">
                                <span>{{ merberData.guestPrice }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="平均回购周期（天）">
                                <span>{{ merberData.avgPurchasePeriod }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="折扣率">
                                <span>{{ merberData.overDiscountRate || 0 }}</span>
                                <span style="font-size: 16px">%</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="平均订单件数">
                                {{ merberData.avgConsumedCount }}
                            </el-descriptions-item>
                            <el-descriptions-item label="距离最近一次购买（天）">
                                {{ merberData.lastConsumedTime }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="oreder_table">
                        <Order></Order>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="行为信息" name="2">
                    <Behavior v-show="activeTab == 2"></Behavior>
                </el-tab-pane>
            </el-tabs>
        </div>
        <ZwIntegarlLog ref="ZwIntegarlLogRef" :memberId="Number(route.query?.id)" :openKid="route.query?.openKid" />
        <ZwGrowLog ref="ZwGrowLogRef" :memberId="Number(route.query?.id)" :openKid="route.query?.openKid" />
        <el-dialog v-model="dialog.levelVisible" title="等级变更明细">
            <el-table :data="dialog.tableData">
                <el-table-column property="newLevel" label="新等级" />
                <el-table-column property="originLevel" label="原等级" />
                <el-table-column property="levelChangeType" label="变更类型">
                    <template v-slot="{ row }">
                        {{ row.levelChangeTypeName }}
                    </template>
                </el-table-column>
                <el-table-column property="createdAt" label="变更时间" />
            </el-table>
            <Pagination
                :total="dialog.totalCount"
                :page-size="dialog.pageSize"
                :current-page="dialog.pageNum"
                @sizeChange="changeSizeHandler"
                @pageChange="changePageHandler" />
        </el-dialog>
    </div>
</template>

<script setup>
import { setLayout, resetLayout } from '@/hooks/layout';
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import Pagination from '@/components/Pagination.vue';
import Behavior from './behavior.vue';
import Order from './order.vue';
import request from '@/request/index';
import { floatDivide } from '@/commons/utils';
import { useRoute } from 'vue-router';

const route = useRoute();

const activeTab = ref('1');
let memberInfo = reactive({
    avatar: '',
    nickname: '',
    memberId: '',
    joinSource: '',
    joinAt: '',
    age: '',
    sex: '',
    mobile: '',
    region: '',
    gradeName: '',
    memberCardNo: ''
});

let merberData = reactive({
    avatar: '',
    gradeName: '',
    gradeNameDesc: '',
    integral: 1,
    joinSource: '',
    joinAt: '',
    growthVal: '',
    transactionTotalAmount: 0,
    transactionTotalCount: 0,
    guestPrice: '0',
    avgPurchasePeriod: '',
    overDiscountRate: '',
    buyTotalCount: 0,
    mainConsumedChannel: '',
    avgConsumedCount: 0,
    lastConsumedTime: ''
});

const dialog = reactive({
    levelVisible: false,
    tableData: [],
    totalCount: 0,
    pageNum: 1,
    pageSize: 10
});
const regionComputed = computed(() => {
    const region2 = [memberInfo.country, memberInfo.cityId, memberInfo.areaId].filter(Boolean).join();
    return memberInfo.region || region2 || '-';
});
const queryBaseInfo = async () => {
    const res = await request('memberBaseInfoServ', {
        memberId: route.query?.id,
        openKid: route.query?.openKid,
        appType: 1
    });
    memberInfo = Object.assign(memberInfo, res.data);
    let priorityObjArr = res.data.priority;
    priorityObjArr.forEach(element => {
        if (element.default === 1 && element.priorityType === 2) {
            element.priorityOuterName = Number(element.priorityVal) + '倍积分';
        }
    });
    const priorityArr = Array.from(priorityObjArr, x => x.priorityOuterName);
    memberInfo.memberPriority = priorityArr;
};
const querymerberInfo = async () => {
    const res = await request('memberStaticsServ', { memberId: route.query?.id });
    merberData = Object.assign(merberData, res.data, res.data?.memberInfo || {});
};

const handleTabClick = val => {
    switch (val.index) {
        case '1':
            querymerberInfo();
            break;
        default:
            break;
    }
};

const typeList = reactive({ ACTIVE: '会员激活', UP: '会员升级', DEGRADE: '会员降级' });
const showLevelDialog = () => {
    dialog.pageNum = 1;
    dialog.pageSize = 10;
    queryLevelChangeData();
    dialog.levelVisible = true;
};

const queryLevelChangeData = async () => {
    await request('memberLevelChangeServ', {
        openKid: route.query?.openKid,
        pageNum: dialog.pageNum,
        pageSize: dialog.pageSize
    }).then(res => {
        dialog.tableData = res.data.list;
        dialog.totalCount = res.data.totalCount;
    });
};

const changeSizeHandler = pageSize => {
    dialog.pageSize = pageSize;
    queryLevelChangeData();
};

const changePageHandler = pageNum => {
    dialog.pageNum = pageNum;
    queryLevelChangeData();
};

const ZwGrowLogRef = ref();
const showGrowDialog = () => {
    ZwGrowLogRef.value.onOpen();
};

const ZwIntegarlLogRef = ref();
const showIntegralDialog = () => {
    ZwIntegarlLogRef.value.onOpen();
};

onMounted(() => {
    setLayout();
    queryBaseInfo();
    querymerberInfo();
});

onUnmounted(() => {
    resetLayout();
});
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .link {
        cursor: pointer;
    }
    :deep(.el-divider--horizontal) {
        margin-top: 12px;
    }
    :deep(.el-card__body) {
        padding: 0;
    }
    :deep(.el-tabs__item) {
        line-height: 50px;
        height: 50px;
        text-align: center;
        // padding: 0 20px !important;
    }
    :deep(.el-tabs__header) {
        margin: 0;
    }
    .title {
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
    }
    .base_number {
        margin-top: 24px;
        height: 104px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        .line {
            width: 1px;
            height: 30px;
            background: #eaeaea;
            position: absolute;
            right: 50%;
        }
        .item {
            text-align: center;
            .label {
                font-size: 14px;
                font-weight: 400;
                color: #969696;
                line-height: 20px;
            }
            .num {
                font-size: 24px;
                font-weight: 550;
                color: #ff6b00;
                line-height: 24px;
                margin-top: 7px;
            }
        }
    }
    .base_left {
        display: inline-block;
        margin-left: 15px;
        font-size: 14px;
        color: #969696;
        line-height: 1;
        .member_name {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
        }
        .level {
            display: flex;
            align-items: center;
            margin-left: 5px;
            min-width: 56px;
            padding-right: 5px;
            height: 17px;
            background: linear-gradient(270deg, #ffac2b 0%, #ffd592 100%);
            border-radius: 8px;
            .vipImg {
                width: 16px;
                height: 17px;
            }
            .level_name {
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                vertical-align: top;
            }
        }
        .mobile {
            height: 29px;
            line-height: 29px;
            font-size: 14px;
            font-weight: 400;
            color: #33302d;
            font-family: PingFangSC-Regular, PingFang SC;
        }
        .desc {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
    .base_info {
        margin-top: 30px;
        .priority {
            display: inline;
            line-height: 30px;
            .priority_item {
                display: inline-block;
                height: 22px;
                background: #fffaf9;
                border-radius: 2px;
                border: 1px solid #facaa8;
                font-size: 12px;
                color: #ff6b00;
                line-height: 22px;
                text-align: center;
                margin-right: 8px;
                padding: 0 8px;
            }
        }
        .level {
            display: inline;
            cursor: pointer;
            color: #ff6b00;
            font-size: 14px;
        }
    }
    .gray999 {
        :deep(.el-descriptions__cell) {
            padding-bottom: 16px !important;
            line-height: 22px;
            .el-descriptions__label {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }
            .el-descriptions__content {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }
    }
    .page_left {
        width: 35%;
        padding: 24px;
        border-right: 2px solid #eaeaea;
        .member_box {
            display: flex;
            align-items: center;
        }
    }
    .page_right {
        width: 65%;
        padding: 0 24px 24px;
        position: relative;
        &::after {
            content: '';
            position: absolute;
            top: 55px;
            left: 24px;
            width: calc(100% - 48px);
            height: 1px;
            background-color: #dcdfe6;
        }
        :deep(.el-tabs) {
            .el-tabs__header {
                margin-bottom: 0;
                .el-tabs__nav-wrap {
                    &::after {
                        height: 0;
                    }
                    .el-tabs__nav-scroll {
                        .el-tabs__nav {
                            .el-tabs__active-bar {
                                height: 2px;
                                bottom: 0.5px;
                            }
                        }
                        .el-tabs__item {
                            height: 57px;
                            line-height: 57px;
                            &:first-child {
                                padding-left: 0;
                            }
                            &:last-child {
                                padding-right: 0;
                            }
                        }
                    }
                }
            }
        }
        .amount_count {
            padding: 24px 40px;
            margin-top: 24px;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            :deep(.el-descriptions__label) {
                color: #969696;
            }
        }
        .oreder_table {
            padding: 24px 0 0;
        }
        .tab_descr {
            :deep(.el-descriptions__content) {
                font-size: 24px;
                font-weight: 600;
                color: #33302d;
                line-height: 33px;
            }
        }
    }
    .app_left {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        height: 48px;
    }
}
</style>
